<template>
	<view class="container">
		<!-- 渲染模式切换按钮 -->
		<view style="margin-bottom: 10px; text-align: right;">
			<button size="mini" @tap="toggleRenderMode">{{ useTemplateRender ? '切换为默认渲染' : '切换为模板渲染' }}</button>
		</view>
		<!-- 模板渲染区域 -->
		<rich-text v-if="useTemplateRender && renderedTemplate" :nodes="renderedTemplate" class="template-content"></rich-text>
		
		<!-- 默认视图 - 当模板不可用或未启用模板渲染时显示 -->
		<view v-else>
			<!-- 顶部大图轮播 -->
			<view v-if="imageList.length > 0" class="top-swiper-wrap">
				<swiper class="top-swiper" :indicator-dots="false" :current="current" @change="onSwiperChange">
					<swiper-item v-for="(img, idx) in imageList" :key="idx">
						<image :src="getImageUrl(img.url || img)" class="swiper-image" mode="aspectFill" @tap="previewImage(imageList, idx)" />
					</swiper-item>
				</swiper>
				<view class="img-count">{{current + 1}}/{{imageList.length}}</view>
			</view>
			
			<!-- 文章信息 -->
			<view v-if="article" class="article-header">
				<text class="article-title">{{article.content_title || article.title}}</text>
				<view class="article-meta">
					<text class="meta-item">作者：{{article.content_author || article.author || '未知'}}</text>
					<text class="meta-item">发布时间：{{formatDate(article.content_datetime || article.date || article.createDate || article.updateDate)}}</text>
					<text class="meta-item">浏览：{{article.content_hit || article.hit || 0}}</text>
				</view>
			</view>
			
			<!-- 文章描述 -->
			<view v-if="article.content_description || article.descrip" class="article-desc">
				<text class="desc-text">{{article.content_description || article.descrip}}</text>
			</view>
			
			<!-- 图片列表 -->
			<view v-if="imageList.length > 0" class="image-list">
				<image
					v-for="(img, idx) in imageList"
					:key="idx"
					:src="getImageUrl(img.url || img)"
					class="list-image"
					mode="widthFix"
					@tap="previewImage(imageList, idx)"
					@error="onImageLoadError(idx)"
					lazy-load
				>
					<view v-if="imageLoadStatus[idx] === 'loading'" class="image-loading">
						<view class="loading-spinner"></view>
					</view>
					<view v-if="imageLoadStatus[idx] === 'error'" class="image-error">
						<text class="error-icon">!</text>
						<text class="error-text">加载失败</text>
					</view>
				</image>
			</view>
			
			<!-- 文章内容 -->
			<view v-if="article.content_details || article.contentText" class="article-content">
				<text class="content-title">文章详情</text>
				<rich-text :nodes="article.content_details || article.contentText || '暂无内容'" class="content-text"></rich-text>
			</view>
			
			<!-- 推荐文章 -->
			<view v-if="recommendArticles.length > 0" class="recommend-section">
				<view class="section-title">
					<text class="title-text">推荐文章</text>
				</view>
				<view class="recommend-list">
					<view
						v-for="item in recommendArticles"
						:key="item.id"
						class="recommend-item"
						@tap="goDetail(item)"
					>
						<image
							v-if="getFirstImage(item.content_img || item.litpic)"
							:src="getFirstImage(item.content_img || item.litpic)"
							mode="aspectFill"
							class="recommend-image"
						/>
						<view class="recommend-info">
							<text class="recommend-title">{{item.content_title || item.title}}</text>
							<text class="recommend-desc">{{item.content_description || item.descrip || '暂无描述'}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 分享按钮 -->
			<!-- <view v-if="article && !loading && !error" class="share-btn-wrap">
				<button class="share-btn" open-type="share">分享给客户查看</button>
			</view> -->
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 空状态 -->
		<view v-if="!loading && !article" class="empty-state">
			<text class="empty-text">文章不存在</text>
		</view>
		
		<!-- 错误状态 -->
		<view v-if="error" class="error-container">
			<text class="error-text">{{error}}</text>
			<button @tap="retry" class="retry-btn">重试</button>
		</view>
	</view>
</template>

<script>
import { articleApi, categoryApi } from '@/api/config';
import templateService from '@/utils/template';
import { shareApi } from '@/api/config';
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { getFullImageUrl, getSafeImageUrl } from '@/utils/image';
import Mustache from 'mustache';
import { formatDate } from '@/utils/date';


export default {
	data() {
		return {
			article: null,
			category: null,
			imageList: [],
			imageLoadStatus: {}, // 用于跟踪每张图片的加载状态
			recommendArticles: [],
			loading: false,
			error: '',
			current: 0,
			// 模板相关数据
			detailTemplate: '',
			renderedTemplate: '',
			templateLoadStatus: {
				success: false,
				message: ''
			},
			useTemplateRender: true, // 新增，是否使用模板渲染
			categoryDetailTemplate: '', // 新增，缓存当前栏目的详情模板
			receivedCategoryId: null // 保存从首页传递过来的栏目ID
		}
	},
	onLoad(options) {
		
		if (options.id) {
			// 如果有传入categoryId，先保存起来
			if (options.categoryId) {
				this.receivedCategoryId = options.categoryId;
			}
			this.loadArticleDetail(options.id);
		} else {
			console.error('[详情页] 缺少文章ID参数');
			this.error = '缺少文章ID参数';
		}
	},
	onShareAppMessage(object) {
		const defaultTitle = this.article?.title || '文章详情';
		const defaultPath = `/pages/detail/detail?id=${this.article?.id || ''}`;
		const defaultImage = this.getFirstImage(this.article?.content_img || this.article?.litpic) || '';
		const promise = new Promise(async (resolve) => {
			if (!this.article || !this.article.id) {
				resolve({
					title: defaultTitle,
					path: defaultPath,
					imageUrl: defaultImage
				});
				return;
			}
			try {
				const res = await shareApi.create({
					shareType: 'content',
					targetId: this.article.id,
					shareTitle: this.article.title,
					shareDescription: this.article.descrip || this.article.content_description || '',
				});
				if (res.code === 200 && res.data && res.data.shareToken) {
					resolve({
						title: res.data.shareTitle,
						path: `/pages/shared/article?token=${res.data.shareToken}`,
						imageUrl: defaultImage
					});
				} else {
					resolve({
						title: defaultTitle,
						path: defaultPath,
						imageUrl: defaultImage
					});
				}
			} catch (e) {
				resolve({
					title: defaultTitle,
					path: defaultPath,
					imageUrl: defaultImage
				});
			}
		});
		
		return {
			title: defaultTitle,
			path: defaultPath,
			imageUrl: defaultImage,
			promise
		};
	},
	onShareTimeline() {
		const defaultTitle = this.article?.title || '文章详情';
		const defaultImage = this.getFirstImage(this.article?.content_img || this.article?.litpic) || '';
		return {
			title: defaultTitle,
			query: `id=${this.article?.id || ''}`,
			imageUrl: defaultImage
		};
	},
	methods: {
		async loadArticleDetail(id) {
			try {
				this.loading = true;
				this.error = '';
				const detailRes = await articleApi.getDetail(id);
				if (detailRes.code === 200) {
					this.article = detailRes.data;
					
					// 获取所有栏目并查找当前所属栏目，获取模板
					const categoryListRes = await categoryApi.getList();
					if (categoryListRes.code === 200) {
						const allCategories = categoryListRes.data.rows || [];
						
						// 优先使用从首页传递过来的栏目ID
						const categoryId = this.receivedCategoryId || this.article.categoryId || this.article.category_id;
						
						let matchedCategory = allCategories.find(cat => cat.id == categoryId);
						if (!matchedCategory) {
							// 如果没找到，尝试通过其他字段匹配
							matchedCategory = allCategories.find(cat => cat.typeid == categoryId);
						}
						
						this.category = matchedCategory || null;
						
						if (this.category) {
							// 获取详情模板
							this.categoryDetailTemplate = await templateService.getCategoryDetailTemplate(this.category);
	
						}
					}
					
					// 解析图片数据
					this.parseImages();
					
					// 获取推荐文章
					await this.loadRecommendArticles();
					
					this.renderTemplate();
				} else {
					console.error('[详情页] API返回错误码:', detailRes.code, '错误信息:', detailRes.msg);
					throw new Error('文章不存在');
				}
			} catch (error) {
				console.error('[详情页] 加载失败, 错误详情:', error);
				console.error('[详情页] 错误堆栈:', error.stack);
				this.error = error.message || '文章加载失败';
			} finally {
				this.loading = false;
			}
		},
		
		// 加载详情模板
		async loadTemplate(category) {
			if (!category) {
				console.warn('[详情页] 没有分类信息，无法加载模板');
				return;
			}
			
			try {
				this.templateLoadStatus = {
					success: false,
					message: '正在加载模板...'
				};
				
				// 加载详情模板
				this.detailTemplate = await templateService.getCategoryDetailTemplate(category);
				
				// 打印模板加载状态
				if (this.detailTemplate) {
					this.templateLoadStatus.success = true;
					this.templateLoadStatus.message = '模板加载成功';
				} else {
					console.warn('[详情页] 模板加载失败或为空');
					this.templateLoadStatus.message = '模板加载失败或为空';
				}
			} catch (error) {
				console.error('[详情页] 加载模板失败:', error);
				this.templateLoadStatus.message = `模板加载错误: ${error.message}`;
			}
		},
		
		// 渲染模板
		renderTemplate() {
			try {
				const tpl = this.categoryDetailTemplate || this.detailTemplate;
				
				if (!tpl) {
					console.warn('[详情页] 没有可用的模板内容，无法渲染');
					this.renderedTemplate = '';
					return;
				}
				
				
				// 处理图片数据，确保正确格式
				let processedArticle = { ...this.article };
				
				// 处理content_img图片数据
				if (this.imageList && this.imageList.length > 0) {					
					// 确保content_img是数组格式，保证模板中{{#content_img}}可以正确循环
					processedArticle.content_img = this.imageList.map(img => {
						let imgUrl = '';
						if (typeof img === 'string') {
							imgUrl = img;
						} else if (img.url) {
							imgUrl = img.url;
						}
						
						// 确保URL是绝对路径
						if (imgUrl && !imgUrl.startsWith('http://') && !imgUrl.startsWith('https://')) {
							// 移除开头的斜杠
							imgUrl = imgUrl.replace(/^\/+/, '');
							imgUrl = `http://localhost:8080/${imgUrl}`;
						}
						
						return { url: imgUrl };
					});
					
					// 添加firstPicUrl字段
					const firstImg = this.imageList[0];
					let firstPicUrl = '';
					if (typeof firstImg === 'string') {
						firstPicUrl = firstImg;
					} else if (firstImg && firstImg.url) {
						firstPicUrl = firstImg.url;
					}
					
					// 确保firstPicUrl是绝对路径
					if (firstPicUrl && !firstPicUrl.startsWith('http://') && !firstPicUrl.startsWith('https://')) {
						firstPicUrl = firstPicUrl.replace(/^\/+/, '');
						firstPicUrl = `http://localhost:8080/${firstPicUrl}`;
					}
					
					processedArticle.firstPicUrl = firstPicUrl;
					
					console.log('[详情页] 处理后的图片数据:', {
						content_img: processedArticle.content_img,
						firstPicUrl: processedArticle.firstPicUrl
					});
				}

				// 处理作者头像
				if (processedArticle.author) {
					processedArticle.authorAvatar = processedArticle.authorAvatar || 'https://placekitten.com/100/100'; // 默认头像
				}

				// 处理litpic字段，确保模板可以使用
				if (processedArticle.litpic) {
					try {
						let litpicUrl = processedArticle.litpic;
						if (typeof litpicUrl === 'string') {
							if (litpicUrl.startsWith('[')) {
								// 尝试解析JSON
								const litpicArray = JSON.parse(litpicUrl);
								if (litpicArray && litpicArray.length > 0) {
									const firstImg = litpicArray[0];
									if (typeof firstImg === 'string') {
										litpicUrl = firstImg;
									} else if (firstImg && firstImg.url) {
										litpicUrl = firstImg.url;
									}
								}
							}
							
							// 确保litpic是绝对路径
							if (litpicUrl && !litpicUrl.startsWith('http://') && !litpicUrl.startsWith('https://')) {
								litpicUrl = litpicUrl.replace(/^\/+/, '');
								litpicUrl = `http://localhost:8080/${litpicUrl}`;
							}
							
							processedArticle.litpic = litpicUrl;
						}
					} catch (e) {
						console.error('[详情页] 处理litpic出错:', e);
					}
				}

				// 如果没有content_img但有litpic，用litpic填充content_img
				if ((!processedArticle.content_img || processedArticle.content_img.length === 0) && processedArticle.litpic) {
					processedArticle.content_img = [{ url: processedArticle.litpic }];
					processedArticle.firstPicUrl = processedArticle.litpic;
				}

				// 处理推荐文章的图片
				if (this.recommendArticles && this.recommendArticles.length > 0) {
					processedArticle.recommendArticles = this.recommendArticles.map(item => {
						const processed = { ...item };
						if (processed.litpic) {
							try {
								let litpicUrl = processed.litpic;
								if (typeof litpicUrl === 'string') {
									if (litpicUrl.startsWith('[')) {
										const litpicArray = JSON.parse(litpicUrl);
										if (litpicArray && litpicArray.length > 0) {
											const firstImg = litpicArray[0];
											if (typeof firstImg === 'string') {
												litpicUrl = firstImg;
											} else if (firstImg && firstImg.url) {
												litpicUrl = firstImg.url;
											}
										}
									}
									
									// 确保litpic是绝对路径
									if (litpicUrl && !litpicUrl.startsWith('http://') && !litpicUrl.startsWith('https://')) {
										litpicUrl = litpicUrl.replace(/^\/+/, '');
										litpicUrl = `http://localhost:8080/${litpicUrl}`;
									}
									
									processed.litpic = litpicUrl;
									processed.firstPicUrl = litpicUrl;
								}
							} catch (e) {
								console.error('[详情页] 处理推荐文章图片出错:', e);
							}
						}
						return processed;
					});
				} else {
					processedArticle.recommendArticles = [];
				}
				
				// 扁平化数据结构，便于 mustache 渲染
				const templateData = {
					...processedArticle,
					category: this.category,
					recommendArticles: processedArticle.recommendArticles
				};
				
				// 打印渲染用的数据
				console.log('[详情页] 渲染数据-文章:', {
					id: this.article?.id,
					title: this.article?.title,
					author: this.article?.author,
					date: this.article?.date,
					descrip: this.article?.descrip,
					contentText: this.article?.contentText ? '内容长度:' + this.article.contentText.length : '空',
					litpic: this.article?.litpic ? '有图片' : '无图片',
					content_img: processedArticle.content_img ? `长度:${processedArticle.content_img.length}` : '无图片数组'
				});
				console.log('[详情页] 渲染数据-栏目:', this.category);
				console.log('[详情页] 渲染数据-推荐文章数量:', this.recommendArticles?.length || 0);
				
				// 渲染前提示
				console.log('[详情页] 开始使用Mustache渲染模板...');
				
				// 使用 mustache 渲染
				let rendered = Mustache.render(tpl, templateData);
				
				// 渲染后处理HTML，修复可能存在的问题
				// 1. 替换所有转义的斜杠
				rendered = rendered.replace(/&#x2F;/g, '/');
				
				// 2. 修复其他常见的HTML转义字符
				rendered = rendered.replace(/&amp;/g, '&');
				rendered = rendered.replace(/&lt;/g, '<');
				rendered = rendered.replace(/&gt;/g, '>');
				rendered = rendered.replace(/&quot;/g, '"');
				
				// 3. 修复路径前缀问题
				// 修复http:http://前缀问题
				rendered = rendered.replace(/http:http:\/\//g, 'http://');
				rendered = rendered.replace(/(src=["'])http:(http:\/\/[^"']+)(["'])/g, '$1$2$3');
				
				// 4. 修复/pages/detail前缀问题
				rendered = rendered.replace(/(src=["'])\/pages\/detail\/(http:\/\/[^"']+)(["'])/g, '$1$2$3');
				rendered = rendered.replace(/(src=["'])\/pages\/detail\/([^"']+)(["'])/g, '$1$2$3');
				
				// 5. 修复任何可能的双斜杠问题，除了http://之外
				rendered = rendered.replace(/([^:])\/\//g, '$1/');
				
				// 渲染后打印结果
				console.log('[详情页] 渲染后的模板结果(前200字符):', rendered ? (rendered.substring(0, 200) + '...') : '为空');
				console.log('[详情页] 渲染结果长度:', rendered ? rendered.length : 0);
				
				// 提取并打印所有img标签的src属性
				if (rendered) {
					const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
					let match;
					const imgSources = [];
					while ((match = imgRegex.exec(rendered)) !== null) {
						imgSources.push(match[1]);
					}
					console.log('[详情页] 渲染结果中的图片路径:', imgSources);
				}

				if (rendered) {
					this.renderedTemplate = rendered;
					console.log('[详情页] 模板渲染成功，已更新renderedTemplate');
				} else {
					this.renderedTemplate = '';
					console.warn('[详情页] 模板渲染结果为空');
				}
			} catch (error) {
				console.error('[详情页] 模板渲染错误:', error);
				console.error('[详情页] 渲染错误堆栈:', error.stack);
				this.renderedTemplate = '';
			}
		},
		
		parseImages() {
			// 解析图片数据
			const imageData = this.article.content_img || this.article.litpic;
			
			if (imageData) {
				try {
					if (typeof imageData === 'string') {
						// 尝试解析JSON格式
						if (imageData.startsWith('[')) {
							this.imageList = JSON.parse(imageData);
						} else {
							// 分隔符格式
							this.imageList = imageData.split(',').map(url => ({url: url.trim()}));
						}
					} else if (Array.isArray(imageData)) {
						this.imageList = imageData;
					} else {
						this.imageList = [];
					}
					
					// 初始化图片加载状态
					this.imageList.forEach((_, idx) => {
						this.$set(this.imageLoadStatus, idx, 'loading');
					});

				} catch (error) {
					console.error('[详情页] 解析图片数据失败:', error);
					console.error('[详情页] 解析失败的错误堆栈:', error.stack);
					this.imageList = [];
				}
			} else {
				this.imageList = [];
			}
		},
		
		async loadRecommendArticles() {
			try {
				const params = {
					categoryId: this.article?.category_id || this.article?.categoryId,
					size: 5
				};
				const res = await articleApi.getList(params);
				
				
				if (res.code === 200) {
					// 过滤掉当前文章
					const allArticles = res.data.rows || [];
					this.recommendArticles = allArticles.filter(item => item.id !== this.article.id).slice(0, 5);
					// 打印获取到的推荐文章数据
					console.log('[详情页] 获取到推荐文章:', this.recommendArticles.map(item => ({
						id: item.id,
						title: item.title,
						descrip: item.descrip || '无描述',
						litpic: item.litpic ? '有图片' : '无图片'
					})));
				} else {
					console.error('[详情页] 推荐文章API返回错误:', res.code, res.msg);
				}
			} catch (error) {
				console.error('[详情页] 推荐文章加载失败:', error);
				console.error('[详情页] 推荐文章加载错误堆栈:', error.stack);
			}
		},
		
		retry() {
			this.error = '';
			if (this.article?.id) {
				this.loadArticleDetail(this.article.id);
			}
		},
		
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}`
			});
		},
		
		getFirstImage(images) {
			if (!images) return '';
			try {
				// 空数组字符串直接返回空
				if (typeof images === 'string' && images.trim() === '[]') return '';
				let imageList = images;
				if (typeof images === 'string') {
					const cleanStr = images.replace(/\\/g, '');
					imageList = JSON.parse(cleanStr);
				}
				if (Array.isArray(imageList) && imageList.length > 0) {
					const firstImage = imageList[0];
					let imageUrl = '';
					if (typeof firstImage === 'object' && firstImage.url) {
						imageUrl = firstImage.url;
					} else if (typeof firstImage === 'string') {
						imageUrl = firstImage;
					}
					if (imageUrl) {
						return getFullImageUrl(imageUrl);
					}
				}
				return '';
			} catch (error) {
				return '';
			}
		},
		
		getImageUrl(url) {
			return getSafeImageUrl(url);
		},
		
		onImageLoadError(idx) {
			console.error(`[详情页] 图片加载失败: ${idx}`);
			this.$set(this.imageLoadStatus, idx, 'error');
		},
		
		previewImage(images, currentIndex) {
			// 只预览成功加载的图片
			const validImages = images.filter((_, idx) => this.imageLoadStatus[idx] !== 'error');
			if (validImages.length === 0) {
				uni.showToast({
					title: '没有可预览的图片',
					icon: 'none'
				});
				return;
			}
			
			const urls = validImages.map(img => this.getImageUrl(img.url || img));
			// 调整当前索引，因为过滤后索引可能变化
			let adjustedIndex = 0;
			let count = 0;
			for (let i = 0; i <= currentIndex; i++) {
				if (this.imageLoadStatus[i] !== 'error') {
					if (i === currentIndex) {
						adjustedIndex = count;
					}
					count++;
				}
			}
			
			uni.previewImage({
				urls: urls,
				current: urls[adjustedIndex],
				loop: true,
				indicator: 'number'
			});
		},
		
		onSwiperChange(e) {
			this.current = e.detail.current;
		},
		
		// 兼容iOS日期格式
		formatDate(dateStr) {
			return formatDate(dateStr);
		},
		
		onImageError(e) {
			console.error('图片加载失败:', e);
		},

		// 切换渲染模式，兜底获取模板
		async toggleRenderMode() {
			this.useTemplateRender = !this.useTemplateRender;
			console.log('[详情页] 切换渲染模式为:', this.useTemplateRender ? '模板渲染' : '默认渲染');
			
			if (this.useTemplateRender) {
				// 检查模板是否存在
				if (!this.categoryDetailTemplate && !this.detailTemplate) {
					console.log('[详情页] 模板内容为空，尝试重新获取...');
					
					if (this.category) {
						try {
							console.log('[详情页] 从栏目重新获取模板:', this.category.categoryUrl);
							this.categoryDetailTemplate = await templateService.getCategoryDetailTemplate(this.category);
							console.log('[详情页] 重新获取模板结果:', this.categoryDetailTemplate ? '成功' : '为空');
						} catch (error) {
							console.error('[详情页] 重新获取模板失败:', error);
						}
					} else {
						console.warn('[详情页] 没有栏目信息，无法获取模板');
					}
				}
				
				console.log('[详情页] 切换到模板渲染模式，模板内容:', 
					this.categoryDetailTemplate ? '已获取(长度:' + this.categoryDetailTemplate.length + ')' : 
					(this.detailTemplate ? '使用默认模板' : '无可用模板'));
				
				// 无论模板是否为空，都调用渲染方法（内部会处理空模板情况）
				this.renderTemplate();
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.container {
	padding: 15px;
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 模板内容样式 */
.template-content {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.top-swiper-wrap {
	position: relative;
	margin-bottom: 16px;
}
.top-swiper {
	width: 100%;
	height: 400rpx;
}
.swiper-image {
	width: 100%;
	height: 400rpx;
	border-radius: 12rpx;
}
.img-count {
	position: absolute;
	right: 24rpx;
	bottom: 16rpx;
	color: #fff;
	background: rgba(0,0,0,0.4);
	border-radius: 20rpx;
	padding: 4rpx 12rpx;
	font-size: 24rpx;
}

.article-header {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	
	.article-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10px;
	}
	
	.article-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		
		.meta-item {
			font-size: 12px;
			color: #999;
		}
	}
}

.article-desc {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	
	.desc-text {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
}

.image-list {
	margin-top: 20rpx;
	.list-image {
		width: 100%;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		position: relative; /* Added for loading/error indicators */
	}
	.image-loading, .image-error {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 8rpx solid #f3f3f3;
		border-top: 8rpx solid #3498db;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	.error-icon {
		font-size: 40rpx;
		color: #ff0000;
		margin-bottom: 10rpx;
	}
	.error-text {
		font-size: 24rpx;
		color: #333;
	}
}

.article-content {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	
	.content-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}
	
	.content-text {
		font-size: 14px;
		color: #333;
		line-height: 1.6;
	}
}

.recommend-section {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	
	.section-title {
		margin-bottom: 15px;
		
		.title-text {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
	}
	
	.recommend-list {
		.recommend-item {
			display: flex;
			padding: 10px 0;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.recommend-image {
				width: 80px;
				height: 60px;
				border-radius: 6px;
				margin-right: 10px;
			}
			
			.recommend-info {
				flex: 1;
				
				.recommend-title {
					font-size: 14px;
					color: #333;
					line-height: 1.4;
					margin-bottom: 5px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				
				.recommend-desc {
					font-size: 12px;
					color: #999;
					line-height: 1.3;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}
	}
}

.loading, .empty-state {
	padding: 16px 0;
	text-align: center;
}

.loading-text, .empty-text {
	font-size: 14px;
	color: #999;
}

.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	padding: 20px;
}

.error-text {
	font-size: 16px;
	color: #666;
	margin-bottom: 20px;
	text-align: center;
}

.retry-btn {
	padding: 12px 24px;
	background-color: #007aff;
	color: #fff;
	border-radius: 6px;
	font-size: 16px;
}

.share-btn-wrap {
	display: flex;
	justify-content: center;
	margin: 24px 0 0 0;
}
.share-btn {
	background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
	color: #fff;
	font-size: 16px;
	border-radius: 24px;
	padding: 0 32px;
	height: 48px;
	line-height: 48px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
</style>
